<template>
	<view class="all">
		<view class="ym"></view>
		<view class="yt"></view>
		<uni-row class="demo-uni-row" :width="nvueWidt">
							<uni-col :span="12">
								<view class="demo-uni-col dark">昆明-大理</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" >切换路线</view>
							</uni-col>
						</uni-row>
		
		<!-- <view class="c">
	<scroll-view class="left" scroll-x="true">
		<view class="a">选择城市</view>
		<view class="a">昆明</view>
		<view class="a">西双版纳</view>
		<view class="a">大理</view>
		<view class="a">红河</view>
		<view class="a">丽江</view>
		<view class="a">香格里拉</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view> 
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
	</scroll-view>
		</view> -->
	<!-- 右边 -->
	<view>
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view id="demo1" class="scroll-view-item_H ">第一天</view>
						<view id="demo2" class="scroll-view-item_H "> 第二天</view>
						<view id="demo3" class="scroll-view-item_H ">第三天</view>
						<view id="demo1" class="scroll-view-item_H ">第四天</view>
						<view id="demo2" class="scroll-view-item_H ">第五天</view>
						<view id="demo3" class="scroll-view-item_H ">第六天</view>
					</scroll-view>
				</view>
				<view class="uni-common-pb"></view>
			
	<scroll-view class="right" scroll-y>
		
		
		<navigator url="../pathxq/pathxq">
			<view class="item">
			<text class="b">大理古城</text>
		</view>
		</navigator>
		
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		<view class="item">
			<text class="b">大理古城</text>
		</view>
		
	</scroll-view>
	
	</view>
</template>

<script>
	// export default {
	// 	data() {
	// 		return {
	// 			active:0
				
	// 		}
	// 	},
	// 	methods: {
	// 		LeftClick(index){
	// 			console.log(index)
	// 			this.active=index;
				
	// 		}
	// 	}
	// }
	export default {
			data() {
				return {
					nvueWidth: 730,
					scrollTop: 0,
					old: {
						scrollTop: 0
					}
				}
			},
			methods: {
				upper: function(e) {
					console.log(e)
				},
				lower: function(e) {
					console.log(e)
				},
				scroll: function(e) {
					console.log(e)
					this.old.scrollTop = e.detail.scrollTop
				},
				goTop: function(e) {
					// 解决view层不同步的问题
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 0
					});
					uni.showToast({
						icon: "none",
						title: "纵向滚动 scrollTop 值已被修改为 0"
					})
				}
			}
		}
</script>

<style>
		
	page{
		background-image: url('@/static/13.jpg');
		background-size: 100%;
	}
	.ym{
		width: 100%;
		height: 200px;
	}
	.yt{
		width: 100%;
		height: 30px;
		background-color: #fff;
		border-radius: 60px 60px 0 0;
	}
	
	.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			background-image: linear-gradient(90deg,#ccffff,#ccccff);
			/* border-radius: 20%; */
			
			/* background-image: url('@/static/12.jpg');
			background-size:200%; */
		}
		
		.scroll-view-item_H {
			display: inline-block;
			width: 33.3%;
			height: 200rpx;
			line-height: 200rpx;
			text-align:center;
			font-size: 36rpx;
			font-family: '楷体';
			/* background-color: #fff; */
			border-right: 1px solid #eee;
			border-radius: 10px;
			/* background-image: linear-gradient(90deg,#ffffff,#ccccff); */
		}
page{
	width: 100%;
	height: 100%;
}
.all{
	height: 100%;
	width: 100%;
	/* display: flex; */
}
/* .c{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow: hidden;	
} */
.left{
	white-space: nowrap;
	
	width: 100%;
	height: 100px;
	border-bottom: 1px solid #eee;
	
	}
	
	.a{
		height: 50px;
		width: 100px;
		line-height: 50px;
		color: #333;
		font-size: 35rpx;
		border-top: 1px solid #eee;
		text-align: center;
		background-color: #fff;
}
.active{
	background-color: aliceblue;
	
}
	
.right{
	height:470px;
	width: 100%;
	margin-bottom: 50px;
	background-color: #fff;
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* justify-content: space-between; */
	
}

.item{
	width: 240rpx;
	height:240rpx;
	background-image: url('@/static/01.jpg');
	background-size: 150%;
	display: block;
	
	margin-left: 5px;
	margin-top: 20px;
	margin-right: 5px;
	margin-bottom: 10px;
	border-radius: 8%;
	
}
.b{
	font-size: 35rpx;
	margin: 15px;
	
}
.dbdh{
	position: fixed;
	bottom:0rpx;
	width: 100%;
	height: 50px;
	text-align: center;
	font-size: 35rpx;
	line-height: 50px;
	background-color:lightblue;
}
.dbdh2{
	position: fixed;
	bottom: 50px;
	width: 100%;
	background-color: #fff;
	color: cornflowerblue;
}
.d{
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: #fff;
}
.demo-uni-row {
		/* margin-bottom: 10px; */

		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		/* margin-bottom: 10px; */
	}

	/* #endif */

	.demo-uni-col {
		height: 50px;
		
	}

	.dark_deep {
		/* background-color: #99a9bf; */
	}

	.dark {
		background-color: #fff;
		font-size: 35rpx;
		letter-spacing: 5px;
		line-height: 50px;
		padding-left: 15px
		;
	}

	.light {
		background-color: #fff;
		text-align: right;
		line-height: 50px;
		padding-right: 10px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* padding: 5rpx 10rpx 0; */
		overflow: hidden;
	}
</style>
